<template>
	<view class="mainPage">
		<u-gap :height="gapHeight"></u-gap>
		<view class="head">
			<view class="bg-img"></u--image>
			</view>
			<view class="introduction">
				<view class="introduction-left">
					<!-- <u--image :src="ticketInfo.avatar" height="160rpx" width="160rpx" class="user-img"></u--image> -->
					<u-avatar :src="ticketInfo.avatar" randomBgColor size="166rpx" default-url="/static/images/f.png"></u-avatar>
				</view>
				<view class="introduction-right-box">
					<view class="intro-box">
						<view class="intro-item">
							<u--image src="/static/images/fish1.png" height="40rpx" width="40rpx" ></u--image>
							<view class="name">{{ticketInfo.storeName}}</view>
						</view>
						<view class="intro-item">
							<u--image src="/static/images/time1.png" height="40rpx" width="40rpx"></u--image>
							<view class="name">
								<!-- <u-count-down :time="ticketInfo.countDown" format="HH:mm:ss" @finish="countDownEnd"></u-count-down> -->
								<u-count-down ref="countDown" :time="ticketInfo.countDown" format="HH:mm:ss"  @change="onChange" @finish="countDownEnd">
									<view class="time">
										<view class="time__custom">
											<text class="time__custom__item">{{ timeData.hours>=10?timeData.hours:'0'+timeData.hours}}</text>
										</view>
										<text class="time__doc">:</text>
										<view class="time__custom">
											<text class="time__custom__item">{{ timeData.minutes >=10?timeData.minutes:'0'+timeData.minutes }}</text>
										</view>
										<text class="time__doc">:</text>
										<view class="time__custom">
											<text class="time__custom__item">{{ timeData.seconds >=10?timeData.seconds:'0'+timeData.seconds}}</text>
										</view>
									</view>
								</u-count-down>
							</view>
						</view>
					</view>
					<view class="delayed">
						<view class="delayed-btn disabled" v-if="ticketInfo.is_delayed === 0">我要续票</view>
						<view class="delayed-btn" v-if="ticketInfo.is_delayed === 1" @tap="Continued(2,'确定要续票吗？')">我要续票</view>
					</view>
				</view>
			</view>
		</view>
		<view class="real">
			<u-cell-group :border="false">
				<u-cell title="当前鱼票" :isLink="true" @click="goTicket" rightIconStyle="fontSize:26rpx">
					<view slot="value" class="text">{{ticketInfo.pitchOn}}</view>
				</u-cell>
				<u-cell title="选手钓位">
					<view slot="value" class="Choose">
						<view class="Choose-text">{{ticketInfo.seat}}</view>
						<view class="Choose-btn" @tap="Continued(1,'换位需要支付100元，确定要换位吗？')" v-if="ticketInfo.showConversionBtn">换位</view>
					</view>
				</u-cell>
				<u-cell title="鱼票规格">
					<view slot="value" class="text">{{ticketInfo.sku}}</view>
				</u-cell>
				<u-cell title="开始时间">
					<view slot="value" class="text">{{ticketInfo.startTime}}</view>
				</u-cell>
				<u-cell title="结束时间"><view slot="value" class="text">{{ticketInfo.endTime}}</view></u-cell>
				<u-cell title="实时渔获">
					<view slot="value" class="text">
						<text v-show="ticketInfo.collect_weight">{{ticketInfo.collect_weight}}斤</text>
						<text v-show="ticketInfo.collect_weight&&ticketInfo.collect_quantity">/</text>
						<text v-show="ticketInfo.collect_quantity">{{ticketInfo.collect_quantity}}条</text>
					</view>
				</u-cell>
				<u-cell title="回鱼金额"><view slot="value" class="text" v-show="ticketInfo.integral">{{ticketInfo.integral}}</view></u-cell>
			</u-cell-group>
		</view>
		<Verify @success="success" :captchaType="'clickWord'" :imgSize="{ width: '330px', height: '155px' }"
			ref="verify"></Verify>
		<u-modal :show="show" :title="title" :content='content' :showCancelButton="true" @cancel="cancelEvent"
			@confirm="sureEvent"></u-modal>
		<u-modal :show="showContinu" title="提示" :showCancelButton="true" @cancel="cancelContinu" @confirm="sureContinu">
			<view class="slot-content">
				{{ContinueContent}}
			</view>
		</u-modal>
		<u-popup :show="showTime" @close="closeTime" @open="openTime" mode="center" round="10rpx" :closeable="true">
			<view class="ContinuedTime">
				<view class="timeList">
					<view class="timeLi" @tap="selectTime(index)" v-for="(item,index) in timeList" :key="index"
						:class="{'activeTime':curTime==index}">
						{{item.time}}
					</view>
					
				</view>
				<view class="toPay" @tap="$u.throttle(jumpPay, 500)">去支付</view>
			</view>
			
		</u-popup>
		<view class="sure-btn" v-if="isStar === 1" @tap="$u.throttle(handleStartTicket, 500)">开始垂钓</view>
		<view class="sure-btn" v-if="isStar === 2" @tap="show = true">结束垂钓</view><!-- handleStopTicket -->
		<view class="sure-btn" v-if="isStar === 3" @tap="navTo(0)">摇号</view>
		<view class="sure-btn" v-if="isStar === 4" @tap="navTo(1)">选号</view>
		<view class="sure-btn disabled" v-if="isStar === 5">待结算…</view>
		<view class="sure-btn" v-if="isStar === 6" @click="$u.throttle(goTicket, 500)">选择鱼票</view>
		
	</view>
</template>

<script>
	import { startTicket,stopTicket } from '@/api/api.js';
	import Verify from '@/components/verify/verify.vue';
	import { toLogin } from '@/libs/login.js';
	import { configMap } from "@/utils";
	import { mapGetters } from 'vuex';
	export default {
		components: {
			Verify
		},
		computed:{
			...configMap([], mapGetters(['isLogin'])),
		},
		data() {
			return {
				errorNetwork: false,
				message: '',
				socketTask: null,
				show: false,//是否结束垂钓弹窗
				title: "提示",
				content: "确认结束垂钓吗？",
				ContinueContent:"确定续票吗？",
				ContinueType:1,
				showVerify: false,
				showContinu: false,
				showTime: false,
				timeList: [{
					time: "30分钟"
				}, {
					time: "1小时"
				}, {
					time: "1.5小时"
				}, {
					time: "2小时"
				}, {
					time: "3小时"
				}],
				curTime: 0,
				timeData: {},

			}
		},
		props:{
			gapHeight:{
				type:String,
				default:"0px"
			},
			isStar: {
				type:Number,
				default: 6,//1:开始垂钓 2：结束垂钓 3：摇号 4：选号 5：待回鱼 6：选择鱼票
			},
			ticketId:{
				type:Number,
				default: null,//鱼票ID
			},
			// autoStart: {
			// 	type:Boolean,
			// 	default: false,//是否开启倒计时
			// },
			ticketInfo:{
				type:Object,
				default:{
					storeName:'--',//钓场名称
					countDown:null,//倒计时
					duration:null,//钓票时长
					avatar:'',//钓场头像
					pitchOn:'',//鱼票名称
					seat:'--',//座位号
					sku:'',//鱼票规格
					showConversionBtn:false,
					startTime:'',
					endTime:'',
					collect_weight:'-',
					collect_quantity:'-',
					integral:'-',
					is_delayed:null
				}
			}
		},
		options: {
			styleIsolation: 'shared'
		},
		watch:{
			/* isStartTime(newVal,oldVal){
				debugger
				if(newVal){
					this.$refs.countDown.start();
				}else{
					this.$refs.countDown.pause();
				}
			}, */
			isStar(newVal,oldVal){
				if(newVal === 1) this.$emit('updataInitInfo')
			}
			
			
		},
		methods: {
			//倒计时触发
			onChange(e) {
				this.timeData = e
			},
			//跳转
			navTo(e){
				let id = this.ticketId
				let params = `?ticket_order_id=${id}`
				// e:  0摇号  1选号
				switch (e){
					case 0:
						//摇号
						uni.navigateTo({
							url:'/pages/angling/Lottery'+params
						})
						break;
					case 1:
						//选号
						uni.navigateTo({
							url:'/pages/angling/chooseSeat'+params
						})
						break;
					default:
						break;
				}
			},
			//倒计时结束
			countDownEnd(){
				this.$emit('updataInfo')
			},
			//开始垂钓
			handleStartTicket(){
				this.$emit('startTicket')
				/* let id = this.ticketId
				startTicket(id).then(res=>{
					this.$refs.countDown.start();
					uni.$u.toast('已开始垂钓')
					this.$emit('startTicket')
				}) */
			},
			//停止垂钓
			handleStopTicket(){
				this.$emit('stopTicket')
				// this.$refs.countDown.pause();
				/* let id = this.ticketId
				stopTicket(id).then(res=>{
					uni.$u.toast('已结束垂钓')
					this.$emit('stopTicket')
				}) */
			},
			socketConnect() {
				const wsUrl = 'wss://your-websocket-server-url';
				this.socketTask = uni.connectSocket({
					url: wsUrl,
					complete: () => {}
				});

				this.socketTask.onOpen(() => {
					console.log('WebSocket连接已打开！');
				});
				this.socketTask.onMessage((res) => {
					console.log('收到服务器内容：' + res.data);
					this.message = res.data
				});
				this.socketTask.onError((err) => {
					console.log('WebSocket连接打开失败，请检查！');
				});
			},
			socketClose() {
				if (this.socketTask) {
					this.socketTask.close();
				}
			},
			//显示验证组件
			closeFish() {
				console.log("open");
				// this.showVerify = true;
				this.$refs.verify.show();
			},

			// chenggong() {
			// 	uni.showToast({
			// 		title: '验证成功'
			// 	});
			// 	this.showVerify = false;
			// },、
			//取消结束鱼票
			cancelEvent() {
				this.show = false;
			},
			//确定结束鱼票
			sureEvent() {
				this.show = false;
				this.closeFish()
			},
			
			//选择鱼票
			goTicket() {
				let islogin = this.isLogin
				if (this.isLogin === false) {
					this.$util.Tips({
						title: '请先登录'
					}, {
						tab: 2,
						url: '/pages/users/login/index'
					});
				} else {
					uni.navigateTo({
						url: '/pages/angling/myFishTicket'
					});
				}
			},
			// chooseSeat() {
				
			// 	uni.navigateTo({
			// 		url: '/pages/angling/chooseSeat'
			// 	});
			// },
			
			//验证成功
			success(data) {
 				console.log('验证', data)
				this.$refs.verify.hide();
				this.handleStopTicket()
			},
			//续票 | 换位
			Continued(type,content) {
				this.ContinueType=type;
				this.ContinueContent=content;
				this.showContinu = true;
			},
			cancelContinu() {
				this.showContinu = false;
			},
			sureContinu() {
				
				if(this.ContinueType==1){//换位
					uni.navigateTo({
						url: '/pages/store/order_submit/index?id=10'
					});
				}
				if(this.ContinueType==2){//续票
					this.showTime = true;
				}
				this.showContinu = false;
				
			},
			closeTime() {
				this.showTime = false;
			},
			openTime() {
				this.showTime = true;
			},
			selectTime(index) {
				this.curTime = index;
				
			},
			jumpPay(){
				let id = this.ticketId
				let params = `?ticket_order_id=${id}`
				uni.navigateTo({
					url: '/pages/store/order_submit/index'+params
				});
				this.showTime = false;
			}



		}
	}
</script>

<style lang="scss" scoped>
	.head {
		position: relative;
		.bg-img{
			background-color: #549CE3;
			height: 350rpx;
			width: 100%;
		}
		.introduction {
			position: absolute;
			display: flex;
			flex-direction: row;
			justify-content: flex-start;
			align-items: center;
			top: 70rpx;
			width: 690rpx;
			left: 30rpx;
			.introduction-left {
				// width: 170rpx;
				// height: 170rpx;
				// border-radius: 170rpx;
				// border: 4rpx solid #99796c;
				padding-left: 10rpx;
			}
			.introduction-right-box {
				display: flex;
				flex-direction: row;
				justify-content: space-between;
				margin-left: 50rpx;
				width: 480rpx;
				.intro-box {
					padding-top: 10rpx;
					.intro-item {
						display: flex;
						flex-direction: row;
						justify-content: flex-start;
						align-items: center;
						.name {
							font-size: 36rpx;
							color: #fff;
							margin-left: 10rpx;
							line-height: 40rpx;
							text-shadow: 0 0 8px rgba(0, 0, 0, .2);
							margin-top: 4rpx;
							// /deep/ .u-count-down__text{
							// 	color: #ffffff !important;
							// 	font-size: 30rpx !important;
							// }
						}
					}

					.intro-item:nth-child(1) {
						margin-bottom: 20rpx;
					}
				}

				.delayed {
					display: flex;
					flex-direction: column;
					align-items: center;
					justify-content: center;

					.delayed-btn {
						background-color: #ffc53e;
						color: #fff;
						font-size: 24rpx;
						padding: 8rpx 30rpx;
						border-radius: 24rpx;
					}
					.disabled{
						background-color: #ccc;
						color: #eee;
					}
				}

			}
		}
	}

	.real {
		padding-left: 30rpx;
		padding-right: 30rpx;
		// margin-top: 40rpx;
		background-color: #fff;
		padding-top: 40rpx;
		border-radius: 25px 25px 0 0;
		position: relative;
		top: -50rpx;
		/deep/ .u-cell__title-text{
			font-size: 28rpx !important;
		}
		/deep/ .u-line{
			border-color: #eee !important;
		}
		/deep/ .u-cell__body{
			padding: 26rpx 30rpx;
		}
        .text{
			font-size: 26rpx;
			color: #757575;
		}
		.Choose {
			display: flex;
			flex-direction: row;
			justify-content: flex-start;
			font-size: 26rpx;

			.Choose-text {
				line-height: 48rpx;
				color: #757575;
			}

			.Choose-btn {
				display: flex;
				justify-content: center;
				align-items: center;
				background-color: #ffc53e;
				color: #fff;
				padding: 0 24rpx;
				border-radius: 50px;
				margin-left: 10rpx;
				font-size: 24rpx;
				height: 46rpx;
			}
		}
	}

	.sure-btn {
		font-size: 28rpx;
		width: 690rpx;
		margin-left: 30rpx;
		background-color: #ffc53e;
		color: #fff;
		text-align: center;
		margin-top: 60rpx;
		border-radius: 10rpx;
		height: 80rpx;
		line-height: 80rpx;
		
	}
	.disabled{
		background-color: #549CE3;
		// color: #B5D3ED;
	}
	
	.ContinuedTime{
		padding: 40rpx;
		width: 600rpx;
		.timeList{
			
			display: flex;
			flex-direction: row;
			justify-content: flex-start;
			flex-wrap: wrap;
			
			.timeLi{
				width: 140rpx;
				line-height: 60rpx;
				margin-right: 20rpx;
				text-align: center;
				border: 2rpx solid #eee;
				margin-bottom: 20rpx;
				border-radius: 10rpx;
			}
			.activeTime{
				background-color: #ffc53e;
				color: #fff;
			}
		}
		.toPay{
			line-height: 70rpx;
			text-align: center;
			background-color: #ffc53e;
			color: #fff;
			font-size: 24rpx;
			border-radius: 10rpx;
			margin-top: 20rpx;
		}
	}
	.time {
	    @include flex;
	    align-items: center;
	    &__custom {
	         /* #ifndef APP-NVUE */
	         display: flex;
	         /* #endif */
	         justify-content: center;
	         align-items: center;
	    
	        &__item {
	             color: #fff;
	             font-size: 32rpx;
	             text-align: center;
	         }
	    }
	    
	    &__doc {
	         color: #fff;
	         padding: 0px 3px;
	     }
	}
</style>